<template>
    <q-page>
        <q-inner-loading visible v-if="loading">
            <q-spinner-gears size="50px" color="primary" />
            <b class="text-primary">数据加载中...</b>
        </q-inner-loading>

    <q-tabs class="col-xs-12 col-md-10" align="justify" inverted>
        <!-- 选项卡 - 注意slot="title" -->
        <q-tab slot="title" label="全部影迹"  @select="select(null)" default />
        <q-tab slot="title" label="已推荐影迹"  @select="select('ON')"  :count="4" />
        <q-tab slot="title" label="未推荐影迹"  @select="select('OFF')"  />

        <q-list v-scroll="scrolled" separator :no-border="$q.platform.is.mobile" :style="$q.platform.is.desktop?'padding:8px;':''">
            <q-collapsible v-for="item in slicedList" :key="'journal_'+item.id" :opened="true">
                <template slot="header">
                    <q-item-side>
                        <img :src="item.poster" style="height:80px" />
                    </q-item-side>
                    <q-item-main>
                        <q-item-tile label>
                            《{{item.movieName}} 》 
                            <q-chip v-if="item.status == 'ON'" color="primary" dense>已推荐首页</q-chip> 
                            <q-chip v-if="item.status == 'OFF'" color="secondary" dense>曾经推荐</q-chip> 
                        </q-item-tile>
                        <q-item-tile sublabel>
                            影迹：{{item.id}}      
                                    
                        </q-item-tile>
                        <q-item-tile sublabel>
                            作者：{{item.nickName}}               
                        </q-item-tile>
                        <q-item-tile sublabel>
                            发布日期：{{item.createTime.substring(0,10)}}               
                        </q-item-tile>
                    </q-item-main>
                    <!-- action list -->
                    <q-item-side right >
                        <q-btn v-if="item.status != 'ON' && item.status != 'OFF'" dense outline color="primary" label="推荐首页" @click="online(item, $event)"/>
                        <q-btn v-if="item.status == 'OFF'" dense outline color="secondary" label="再次推荐" @click="online(item, $event)"/>
                        <q-btn v-if="item.status == 'ON'" dense outline color="black" label="首页下线" @click="offline(item, $event)"/>
                    </q-item-side>
                </template>
                <div style="padding:5px;">
                    <div>{{item.review}}</div>
                    <img v-for="(photo, index) in item.photos.split(',')" :key="'photo_'+item.id+index"
                        :src="photo" style="width:100px;margin:5px;"  />
                </div>
            </q-collapsible>
        </q-list>
    </q-tabs>
    </q-page>
</template>

<script>
export default {
  name: 'PagePlusJournal',
  data() {
    return {
      //limit: 50,
      selected : null,
      currentIndex: 10,
      loading : true,
      list: []
    }
  },
  mounted() {
    this.$api.ui.pageTitle = 'PLUS影迹管理';
    this.loadData();
    //this.$refs.scroll.loadMore();
  },
  methods: {
      scrolled: function() {
          this.currentIndex += 5;
      },
      online: function(item, e) {
          if(e) e.stopPropagation(); 
          this.$api.plus.onlineJournal(item.id, res=>{
              item.status = 'ON';
          });
      },
      select(type) {
        this.selected = type;
      },
      offline: function(item, e) {
          if(e) e.stopPropagation(); 
          this.$api.plus.offlineJournal(item.id, res=>{
              item.status = 'OFF';
          });
      },
      loadData: function(e) {  
          // if(e) e.stopPropagation();               
          let me = this;
          me.loading = true;
          me.$api.plus.loadJournals(0, 20, res=>{
              me.currentIndex = 15;
              me.list = res.data.model;
              me.loading = false;
              if(me.list.length == 0) {
                me.$q.notify({ message: '没有符合条件的影迹', type: 'warning' });
              }
          }, error=>{
              me.loading = false;
          });
      }
    
  },
  computed: {
      slicedList() {
          let selected = this.selected;
          let filteredList = this.list;
          if(filteredList.length < this.currentIndex) {
              filteredList = filteredList.slice(0, this.currentIndex);
          }
          return filteredList.filter(function (item) {
              // 上线的影迹
            if(selected == 'ON' && item.status != 'ON') {
                return false;
            }
            if(selected == 'OFF' && item.status == 'ON') {
                return false;
            }
            return true;
        })
      }
  }
}
</script>

<style>

</style>
